<template>
  <div
      class="line"
      v-show="showLine"
      :style="[offset, borderCursor]"
      title="双击删除"
      @mousedown="handleDown"
      @dblclick.stop="handleRemove">
    <div class="action" :style="actionStyle">
      <span class="del" @click="this.handleRemove">&times;</span>
      <span class="value">{{ startValue }}</span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'LineRuler',
  data() {
    return {
      startValue: 0,
      showLine: true,
    }
  },
  props: {
    index: Number,
    start: Number,
    vertical: Boolean,
    scale: Number,
    value: Number,
    palette: Object,
    isShowReferLine: Boolean,
    thick: Number,
  },
  computed: {
    offset() {
      const offset = (this.startValue - this.start) * this.scale;
      const positionValue = offset + 'px';
      const position = this.vertical ? {top: positionValue} : {left: positionValue};
      return position;
    },
    borderCursor() {
      const borderValue = `1px solid ${this.palette.lineColor}`
      const border = this.vertical ? {borderTop: borderValue} : {borderLeft: borderValue};

      const cursorValue = this.isShowReferLine ? this.vertical ? 'ns-resize' : 'ew-resize' : 'none';
      return {
        cursor: cursorValue,
        ...border,
      }
    },
    actionStyle() {
      const actionStyle = this.vertical ? {left: this.thick + 'px'} : {top: this.thick + 'px'};
      return actionStyle;
    }
  },
  watch: {
    startValue: {
      handler: function () {
        this.changeOffset()
      }
    },
    start: {
      handler: function () {
        this.changeOffset()
      }
    }
  },
  methods: {
    dbClick () {
      alert(123)
    },
    handleDown(e) {
      const startD = this.vertical ? e.clientY : e.clientX;
      const initValue = this.startValue;
      this.$emit('onMouseDown');
      const onMove = (e) => {
        const currentD = this.vertical ? e.clientY : e.clientX
        const newValue = Math.round(initValue + (currentD - startD) / this.scale)
        this.startValue = newValue;
      }
      const onEnd = () => {
        this.$emit('onRelease', this.startValue, this.index);
        document.removeEventListener('mousemove', onMove)
        document.removeEventListener('mouseup', onEnd)
      }
      document.addEventListener('mousemove', onMove)
      document.addEventListener('mouseup', onEnd)
    },
    handleRemove() {
      this.$emit('onRemove', this.index);
    },
    initStartValue() {
      this.startValue = this.value;
    },
    changeOffset () {
      const offset = (this.startValue - this.start) * this.scale;
      if (offset < 0) {
        this.showLine = false;
      } else {
        this.showLine = true;
      }
    }
  },
  mounted() {
    this.initStartValue();
  }
}
</script>

<style lang="less" scoped>
.line {
  position: absolute;

  .action {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .value {
    pointer-events: none;
    padding: 2px 2px;
    background-color: #2196f3;
  }

  .del {
    cursor: pointer;
    padding: 3px 5px;
    visibility: hidden;
    font-size: 14px;
  }

  &:hover .del {
    visibility: visible;
  }
}

.h-container {
  .line {
    height: 100vh;
    top: 0;
    padding-left: 5px;

    .action {
      transform: translateX(-24px);

      .value {
        margin-top: 4px;
        margin-left: 2px;
      }
    }
  }
}

.v-container {

  .line {
    width: 100vw;
    left: 0;
    padding-top: 5px;

    .action {
      transform: translateY(-24px);
      flex-direction: column;

      .value {
        margin-top: 0px;
      }
    }
  }
}
</style>